<template>
  <div>
    <el-dropdown @command="handle">
      <span class="el-dropdown-link">
        {{ $t("Language") }}<i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) of list"
          :key="index"
          :command="item.key"
          >{{ item.name }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'change-language',
  data () {
    return {
      list: [
        { key: 'en', name: 'English' }, // 英语
        { key: 'zh-CN', name: '中文' } // 中文
      ]
    }
  },
  methods: {
    handle (value) {
      this.$i18n.locale = value
      localStorage.setItem('change-language', value)
      // location.reload();//强制刷新页面
    }

  }
}
</script>
<style scoped lang="less">
.el-dropdown {
  font-size: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #050606;
}
</style>
